rax-image

Image

描述

用于展示图片

安装

$ npm install rax-image --save

引用

import Image from 'rax-image';

属性

注： 1、支持列表中的 代表 Web 代表 weex 代表阿里小程序代表微信小程序

属性	类型	默认值	必填	描述	支持
source	object: {uri: string}	-	true	设置图片的 uri
style	object: { width: number height: number }	-	true	图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性
fallbackSource	object: {uri: string}	-	false	备用图片的 uri（当主图加载失败是加载）
resizeMode	string： 'contain' 'cover' 'stretch'	-	false	决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小
mode	String:	scaleToFill	false	小程序中的图片模式，可选项更多
quality	string: 'original' 'normal' 'low' 'high' 'auto'	-	false	图片质量
placeholder	string	-	false	占位图的 URL，在图片下载过程中将展示占位图， 图片下载完成后将显示 source 中指定的图片。
onClick	function	-	false	点击图片时的回调函数
onLoad	function	-	false	图片加载成功的回调函数
onError	function	-	false	图片加载失败的回调函数

onLoad onError 返回

当完成图片加载成功/失败时，将分别触发 onLoad/onError 中的回调函数 function(event) => {}

weex 下（iOS/Android）

成员	类型	描述
success	boolean	标记图片是否成功加载，成功为 1/true，失败为 0/false
size	object	加载的图片大小对象
size.naturalWidth	number	图片宽度，如果图片加载失败则为 0/-1
size.naturalHeight	number	图片高度，如果图片加载失败则为 0/-1

Web 下是 web 原生的 Event 事件

成员	类型	描述
target	dom	图片自身元素
target.naturalWidth	number	图片宽度
target.naturalHeight	number	图片高度

小程序下

成员	类型	描述
type	string	事件类型
detail	object	点击位置信息
target	object	点击对象属性信息
currentTarget	object	同上

示例

普通示例

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Image from '../src/index';

const App = () => {
  const imageRef = useRef(null);
  return (
    <Image
      ref={imageRef}
      source={{
        uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
      }}
      style={{
        height: '68rpx',
        width: '67rpx',
      }}
    />
  );
};

render(<App />, document.body, { driver: DriverUniversal });

使用 fallbackSource 和 resizeMode

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import Image from '../src/index';

const App = () => {
  return (
    <Image
      source={{
        uri:
          'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png',
      }}
      fallbackSource={{
        uri:
          'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg',
      }}
      style={{
        width: '100rpx',
        height: '100rpx',
      }}
      resizeMode="cover"
    />
  );
};

render(<App />, document.body, { driver: DriverUniversal });